<template>
 <div class="easyd-weixin-Box app_page">
	<div class="app_box_content app_list_box MARGIN_BOTTOM_10" style="background: rgba(0, 0, 0, 0.25);" v-if="tempSell != ''">
		<div class="app_box_content_left" style="max-width: 250px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
			当前查看
			<span class="" v-if="tempType == '0'">战略</span>
      		<span class="" v-if="tempType == '1'">代理</span>
			“{{tempSellName}}”
		</div>
		<div class="app_box_content_right" @click="clearSellDetail()">
			返回
		</div>
	</div>
  <div class="app_list_box MARGIN_BOTTOM_10">
   <div class="app_box_content"  @click="agentAddGo">
    <div class="app_box_content_img">
     <img src="../../../../static/agentImages/daililuru.png">
    </div>
    <div class="app_box_content_left">代理录入</div>
    <div class="app_box_content_right">
     <span class="fa fa-angle-right fa-lg C2"></span>
    </div>
   </div>
   <div class="app_box_content" style="position: relative;" @click="agentMangerGo">
    <div class="app_box_content_img">
     <img src="../../../../static/agentImages/dailiguanli.png">
    </div>
    <div class="app_box_content_left" style="line-height: 32px;">代理商管理</div>
    <div class="app_box_content_right">
     <span class="fa fa-angle-right fa-lg C2"></span>
    </div>
    <span
     class="T4 C4 sell_personnel_info"
     v-if="sellType == '0'"
    >战略合作商{{agentData.strategicCooperationData.length}}位，代理商{{agentData.agentData.length}}位，销售{{agentData.salesCount}}位</span>
    <span
     class="T4 C4 sell_personnel_info"
     v-if="sellType == '1'"
    >代理商{{agentData.agentData.length}}位，销售{{agentData.salesCount}}位</span>
   </div>
  </div>

  <div class="app_list_box MARGIN_BOTTOM_10">
   <div class="app_box_title T1">团队销售概况</div>
   <div class="sell_information C2">
    <div class="sell_information_item app_box_flex">
     <div class="app_box_flex_1">
      <p>{{agentData.nowDayAddCustomerCount}}</p>
      <p>今日新增</p>
     </div>
     <div class="app_box_flex_1">
      <p>{{agentData.nowDayBuyCount}}</p>
      <p>今日成交</p>
     </div>
     <div class="app_box_flex_1">
      <p>{{agentData.nowDayBuyMoney}}</p>
      <p>今日销售额</p>
     </div>
    </div>
    <div class="sell_information_item app_box_flex">
     <div class="app_box_flex_1">
      <p>{{agentData.customerCount}}</p>
      <p>客户总数</p>
     </div>
     <div class="app_box_flex_1">
      <p>{{agentData.buyCount}}</p>
      <p>总成交数</p>
     </div>
     <div class="app_box_flex_1">
      <p>{{agentData.buyMoney}}</p>
      <p>总销售额</p>
     </div>
    </div>
   </div>
  </div>

  <div class="app_list_box MARGIN_BOTTOM_20" v-if="sellType != '2' && tempType != '1'">
   <div class="app_box_content">
    <div class="app_box_content_left">
     <span v-if="sellType == '0'">战略</span>
     <span v-if="sellType == '1'">代理</span>
    	 销售统计表&nbsp;&nbsp;
     <span class="C2 T2">({{dateInfo.month}}月)</span>
    </div>
    <div class="app_box_content_right" style="position: relative;">
     <div class="capsule_box">
      <span class="T3 C4" v-if="$userData.getOsType() == '0' && tempType == ''" :class="sellType=='0' ? 'activity' : ''" @click="sellTypeBtn('0')">战略</span>
      <span class="T3 C4" :class="sellType=='1' ? 'activity' : ''" @click="sellTypeBtn('1')">代理</span>
     </div>
    </div>
   </div>

	 <div class="agentListBox" v-if="sellType == '1'">
    <div class="app_box_content_list" v-for="item in agentData.agentData" @click="sellDetail(item,'1')">
     <div class="app_box_flex">
      <div class="app_box_content_left">
       {{item.os_name}}&nbsp;&nbsp;
       <span class="C4 T4">({{item.osei_phone}})</span>
      </div>
     </div>
     <div class="app_box_flex agent_list C2 T2">
      <div class="app_box_flex_1">
       <p>{{item.customerCount}}</p>
       <p>新增</p>
      </div>
      <div class="app_box_flex_1" style="flex: 2;">
       <p>{{item.nowMonthBuyCount}}</p>
       <p>成交</p>
      </div>
      <div class="app_box_flex_1">
       <p>{{item.nowMonthBuyMoney}}</p>
       <p>销售额</p>
      </div>
     </div>
    </div>
   </div>

	 
   <div class="strategicCooperationBox" v-if="sellType == '0'">
    <div class="app_box_content_list" v-for="item in agentData.strategicCooperationData" @click="sellDetail(item,'0')">
     <div class="app_box_flex">
      <div class="app_box_content_left">
       {{item.os_name}}&nbsp;&nbsp;
       <span class="C4 T4">({{item.osei_phone}})</span>
      </div>
     </div>
     <div class="app_box_flex agent_list C2 T2">
      <div class="app_box_flex_1">
       <p>{{item.customerCount}}</p>
       <p>新增</p>
      </div>
      <div class="app_box_flex_1" style="flex: 2;">
       <p>{{item.nowMonthBuyCount}}</p>
       <p>成交</p>
      </div>
      <div class="app_box_flex_1">
       <p>{{item.nowMonthBuyMoney}}</p>
       <p>销售额</p>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
 data() {
  return {
   dateInfo: {},
   sellType: this.$userData.getOsType(), //销售类型  战略、代理
    tempType: '',
    tempSell: '',
    tempSellName: ''
  };
 },
 computed: {
  ...mapState({
   agentData: state => state.AgentModule.agentData
  })
 },
 mounted() {
  this.dateInfo = this.$common.getNowDateInfo();

	this.tempType = '';
	this.tempSell = '';
	this.tempSellName = '';
  this.initData();
 },
 methods: {
   agentMangerGo(){
     this.$easyUtil.GO(this, '/agentManager')
   },
	agentAddGo(){
		this.$easyUtil.GO(this, '/agentAdd')
	},
  initData(osid,utype) {
  	var os_id = this.$userData.getOsid();
  	var u_type = this.$userData.getOsType();
  	if(osid){
  		os_id = osid;
  	}
  	if(utype){
  		u_type = utype;
  	}
  	
   var params = {
    year: this.dateInfo.year,
    month: this.dateInfo.month,
    os_id: os_id,
    u_type: u_type
   };

   this.$easyUtil.startLoading(this);
   this.$http.postHttp(this.$API.agentIndex, params, rs => {
    this.$easyUtil.endLoading(this);
		this.$store.commit("AgentModule/updateAgentData", rs);
		
   });
  },
	clearSellDetail(item) {
	    this.tempType = '';
	    this.tempSell = '';
	    this.tempSellName = '';
		this.initData();
	},
	sellDetail(item,type) {
		console.log(type)
		if (this.$userData.getOsType() == 0 || this.$userData.getIsManager() == 1) {
			console.log(item.os_id)
	        this.tempType = type;
	        this.tempSell = item.os_id;
	        this.tempSellName = item.os_name;
	        this.sellType = 1;
			this.initData(item.os_id,type);
		} else{
			console.log('权限不足')
		}
	},
  sellTypeBtn(type) {
   this.sellType = type;
  }
 }
};
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';

.app_box_content_img {
 height: 45px;
 width: 45px;
 overflow: hidden;
}

.app_box_content_img img {
 padding: 15%;
 padding-left: 0;
 height: 70%;
 width: 70%;
 object-fit: cover;
}

.sell_personnel_info {
 position: absolute;
 bottom: -10px;
 left: 57px;
}

.sell_information {
}

.sell_information .sell_information_item .app_box_flex_1 {
 text-align: center;
 padding: 10px;
 border-right: 1px solid #f6f6f6;
 border-bottom: 1px solid #f6f6f6;
}

.capsule_box {
 border-radius: 100px;
 overflow: hidden;
 display: inline-flex;
 line-height: initial;
}

.capsule_box span {
 background: #f4f4f4;
 color: #999;
 padding: 2px 8px;
 margin-right: 1px;
}

.capsule_box span.activity {
 background: #FBD415;
 color: #fff;
}

.capsule_box span:last-child {
 margin-right: 0;
}

.agent_list {
}

.agent_list p {
 line-height: 22px;
 text-align: center;
}
</style>